<template>
	<view class="perInfo">
		<!-- 基本信息 -->
		<view class="inner">
			<view class="infoTit">基本信息<text class="smTit must">(必填)</text></view>
			<view class="basicForm">
				<view class="nameWrap">
					<!-- spec -->
					<view class="formItem">
						<view class="formTit">姓名</view>
						<view class="formItemCon"> 
							<input class="formInp" v-model="userName" type="text" maxlength="6" placeholder="请输入姓名"/>
						</view>
					</view>
					<!-- <view class="itemRadCon" @tap="setNiming">
						<view class="radView" :class="[isNimingFlag ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
						<view class="radTit hasBold">是否匿名</view>
					</view> -->
				</view>
				<view class="formItem">
					<view class="formTit">性别</view>
					<view class="formItemCon">
						<view class="itemRadCon"
							v-for="(item,index) in sexArr"
							:key="index"
							@tap="selectSex(index,item.name)"
						>
							<view class="radView" :class="[sexIndex == index ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
							<view class="radTit">{{item.name}}</view>
						</view>
						<!-- <view class="itemRadCon">
							<view class="radView"><view class="iconfont icon-duihao"></view></view>
							<view class="radTit">女</view>
						</view> -->
					</view>
				</view>
				<view class="formItem">
					<view class="formTit">联系电话</view>
					<view class="formItemCon">
						<input class="formInp" v-model="phoneNum" type="tel" maxlength="11" placeholder="请输入手机号码"/>
					</view>
				</view>
				<view class="currQk">
					<view class="qkTit">目前现存情况<text class="tip">(可多选)</text></view>
					<view class="qkList">
						<view class="qkItem"
							:class="[item.selFlag ? 'active' : '']"
							v-for="(item,index) in perInfoArr"
							:key="index"
							@tap="selectCurrPos(index,item.name)"
						>
							<view class="multiView"><view class="iconfont icon-duihao"></view></view>
							<view class="qkName">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 紧急联系人 -->
		<view class="inner">
			<view class="infoTit">紧急联系人<text class="smTit must">(必填)</text></view>
			<view class="basicForm">
				<view class="formItem">
					<view class="formTit">紧急联系人</view>
					<view class="formItemCon">
						<input class="formInp" v-model="lxrName" type="text" placeholder="请输入姓名"/>
					</view>
				</view>
				<view class="formItem">
					<view class="formTit">你们的关系</view>
					<view class="formItemCon">
						<picker class="zxrPicker" @change="bindSelect" :value="relationIndex" :range="relationArr" range-key="name">
							<text>{{relationArr[relationIndex].name}}</text>  
							<text class="iconfont icon-sanjiao"></text> 
						</picker>
					</view>
				</view>
				<view class="formItem">
					<view class="formTit">联系电话</view>
					<view class="formItemCon">
						<input class="formInp" v-model="lxrTel" type="tel" maxlength="11" placeholder="请输入手机号码"/>
					</view>
				</view>
			</view>
		</view>
		<!-- 过往经历 -->
		<view class="inner noMargBot">
			<!-- <text class="smTit">(选填)</text> -->
			<view class="infoTit">过往经历<text class="smTit must">(必填)</text></view>
			<view class="experienceItem">
				<view class="experTit">1.你是否接受过心理咨询?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in xlzxArr"
						:key="index"
						@tap="selectXlzx(index,item.name)"
					>
						<view class="radView" :class="[xlzxIndex == index ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="experienceItem">
				<view class="experTit">2.你是否接受过精神科相关的诊断或治疗?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in jszdArr"
						:key="index"
						@tap="selectJsk(index,item.name)"
					>
						<view class="radView" :class="[jszdIndex == index ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="experienceItem">
				<view class="experTit">3.你是否有过自伤/自杀的想法或行为?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in zsArr"
						:key="index"
						@tap="selectZx(index,item.name)"
					>
						<view class="radView" :class="[zsIndex == index ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="experienceItem">
				<view class="experTit">4.你是从哪知道该平台的?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in knowArr"
						:key="index"
						@tap="selectKnow(index,item.name)"
					>
						<view class="radView" :class="[knowIndex == index ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="agree" @tap="agree">
			<view class="agreeMulti" :class="[isAgreeFlag ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
			<view>同意并签署<text class="xys" @tap.stop="goFwxy">《咨询预约协议书》</text></view>
		</view> -->
		<button class="comBtn" :disabled="isDisabledFlag" @tap="save">保存</button>
	</view>
</template>

<script>
	import { addZxUser } from '@/api/xlzx/index'
	export default {
		data(){
			return{
				userName:'',
				phoneNum:'',
				lxrName:'',
				lxrTel:'',
				perInfoArr:[{name:'婚姻家庭',selFlag:false},{name:'恋爱情感',selFlag:false},{name:'亲子教育',selFlag:false},
							{name:'身心健康',selFlag:false},{name:'性心理',selFlag:false},{name:'职场',selFlag:false},
							{name:'人际关系',selFlag:false},{name:'个人成长',selFlag:false},{name:'少儿成长',selFlag:false},
							{name:'特殊情况',selFlag:false},{name:'其他',selFlag:false}
				],
				perInfoArrVal:[],
				relationArr:[{name:'亲友'},{name:'父母'},{name:'兄妹'},{name:'夫妻'}],
				relationIndex:0,
				relationVal:'亲友',
				sexArr:[{name:'男'},{name:'女'}],//性别
				sexIndex:0,
				sexVal:'男',
				xlzxArr:[{name:'是'},{name:'否'}],//是否接受过心理咨询
				xlzxIndex:-1,
				xlzxVal:'',
				jszdArr:[{name:'是'},{name:'否'}],//是否有精神科相关诊断/治疗
				jszdIndex:-1,
				jszVal:'',
				zsArr:[{name:'是'},{name:'否'}],//是否有过自杀/伤行为
				zsIndex:-1,
				zsVal:'',
				knowArr:[{name:'微信'},{name:'朋友介绍'}],//通过哪知道我们平台
				knowIndex:-1,
				knowVal:'',
				isNimingFlag:false,
				isAgreeFlag:false,
				isDisabledFlag:false,
				nmTag:1//默认不匿名 1否 2是
			}
		},
		methods:{
			save(){
				if(this.userName == ''){
					this.util.showToast('姓名不能为空');
				}else if(this.phoneNum == ''){
					this.util.showToast('联系电话不能为空');
				}else if(!this.regX.regPhone.test( this.phoneNum )){
					this.util.showToast('请输入正确的联系方式');
				}else if(this.perInfoArrVal.length == 0){
					this.util.showToast('请选择现存情况');
				}else if(this.lxrName == ''){
					this.util.showToast('请输入紧急联系人姓名');
				}else if(this.lxrTel == ''){
					this.util.showToast('紧急联系人电话不能为空');
				}else if(!this.regX.regPhone.test( this.lxrTel )){
					this.util.showToast('紧急联系人电话格式不对');
				}else if(this.xlzxVal == ''){
					this.util.showToast('请选择您是否接受过心理咨询');
				}else if(this.jszVal == ''){
					this.util.showToast('请选择您是否有精神科相关诊断/治疗');
				}else if(this.zsVal == ''){
					this.util.showToast('请选择您是否有过自杀/伤行为');
				}else if(this.knowVal == ''){
					this.util.showToast('请选择您是通过哪知道我们平台');
				}/*else if(!this.isAgreeFlag){
					this.util.showToast('请勾选咨询预约协议书');
				}*/else{
					var experienceStr = this.xlzxVal + ',' + this.jszVal + ',' + this.zsVal + ',' + this.knowVal
					var field = { zxrName:this.userName,zxrMobile:this.phoneNum,nmTag:this.nmTag,sex:this.sexVal,currInfo:this.perInfoArrVal.join(','),
									lxrName:this.lxrName,lxrMobile:this.lxrTel,relation:this.relationVal,experience:experienceStr
								};
					this.isDisabledFlag = true;
					uni.showLoading({ title: '保存中...', mask: true }); 
					addZxUser(field).then(res=>{
						//this.util.showToast('提交成功,等待后台审核中');
						this.util.showToastSuc('保存成功');
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.isRefreshFlag = true;
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500);
					}).catch(err=>{
						console.log(err)
						this.isDisabledFlag = false;
					});
					
				}
			},
			setNiming(){
				this.isNimingFlag = !this.isNimingFlag;
				if(this.isNimingFlag){//是
					this.nmTag = 2;
				}else{//否
					this.nmTag = 1;
				}
			},
			selectSex(index,name){
				this.sexIndex = index;
				this.sexVal = name;
			},
			selectCurrPos(index,name){
				this.util.commonMultiSelect(this.perInfoArr,this.perInfoArrVal,index,name)
			},
			selectXlzx(index,name){
				this.xlzxIndex = index;
				this.xlzxVal = name;
			},
			selectJsk(index,name){
				this.jszdIndex = index;
				this.jszVal = name;
			},
			selectZx(index,name){
				this.zsIndex = index;
				this.zsVal = name;
			},
			selectKnow(index,name){
				this.knowIndex = index;
				this.knowVal = name;
			},
			bindSelect(e){
				this.relationIndex = e.target.value;
				this.relationVal = this.relationArr[this.relationIndex].name;
			},
			//咨询预约协议
			goFwxy(){
				uni.navigateTo({
					url:'../../protocol/protocol?xyId=7'
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang='scss' scoped>
	.comBtn{
		margin:50rpx 0;
		border-radius: 50rpx;
	}
	/* 同意咨询预约协议书 */
	.agree{
		height: 60rpx;
		display: flex;
		align-items: center;
		font-size: $font-size24;
		color: $pss-text-colora;
		.xys{
			color: $pss-text-color3;
		}
		.agreeMulti{
			width: 22rpx;
			height: 22rpx;
			line-height: 22rpx;
			border: 1rpx solid $pss-text-colora;
			border-radius: 6rpx; 
			color: $pss-bg-primary;
			text-align: center;
			margin-right: 10rpx;
			.icon-duihao{
				font-size: $font-size22;
			}
			&.active{
				border: 1rpx solid $pss-color-primary_1;
				background: $pss-color-primary_1;
			}
		}
	}
	/* 过往经历 */
	.experienceItem{
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
		.experTit{
			font-size: $font-size26;
			color: $pss-text-color8;
			margin-bottom: 10rpx;
		}
		.experCon{
			display: flex;
			height: 70rpx;
		}
	}
	/* 紧急联系人 */
	.zxrPicker{
		width: 100%;
		height: 100%;
		line-height: 90rpx;
		text-align: right;
		font-size: $font-size28;
		color: $pss-text-color3;
		.icon-sanjiao{
			color: $pss-text-colora;
		}
	}
	.qkList{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.qkItem{
			width: 32%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			height: 65rpx;
			font-size: $font-size28;
			color: $pss-text-color3;
			.multiView{
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				border: 1rpx solid #eee;
				border-radius: 10rpx;
				color: #fff;
				text-align: center;
				margin-right: 10rpx;
				.icon-duihao{
					font-size: $font-size24;
				}
			}
			&.active{
				.multiView{
					border: 1rpx solid $pss-color-primary_1;
					background: $pss-color-primary_1;
				}
			}
		}
		&:after{
			content:'';
			width: 32%;
			height: 65rpx;
		}
	}
	.qkTit{
		height: 90rpx;
		line-height: 90rpx;
		font-size: $font-size28;
		color: $pss-text-color3;
		.tip{
			margin-left: 10rpx;
		}
	}
	.nameWrap{
		align-items: center; 
	}
	.formItem{
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		.formTit{
			width: 160rpx;
			height: 100%;
			line-height: 90rpx;
			font-size: $font-size28;
			color: $pss-text-color8;
			flex-shrink: 0;
		}
		.formItemCon{
			width: 76%;
			height: 90rpx;
			display: flex;
			justify-content: flex-end;
			
			.formInp{
				width: 90%;
				height: 100%;
				text-align: right;
				font-size: $font-size28;
				color: $pss-text-color3; 
				padding: 0 5%;
			}
		}
		&.spec{
			width: 86%;
		}
	}
	.itemRadCon{
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: $font-size28; 
		.radView{
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			border: 1rpx solid #eee;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			margin-right: 10rpx;
			.icon-duihao{
				font-size: $font-size24;
			}
			&.active{
				border: 1rpx solid $pss-color-primary_1;
				background: $pss-color-primary_1;
			}
		}
		.radTit{
			color: $pss-text-color3;
			&.hasBold{
				font-weight: bold;
			}
		}
		&.spec{
			justify-content: flex-start !important;
		}
	}
	.inner{
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		/* 基本信息 */
		.infoTit{
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size30;
			color: $pss-text-color3;
			font-weight: bold;
			.smTit{
				font-size: $font-size24;
				color: $pss-text-colora;
				margin-left: 10rpx;
				font-weight: normal;
				&.must{
					color: $pss-color-red;
				}
			}
		}
		&.noMargBot{ 
			margin-bottom: 0;
		}
	}
	.perInfo{
		padding: 20rpx 30rpx 0;
	}
</style>